<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-scrollbar>
				<div class="app-container">
					<div class="el-row">
						<div class="card-box el-col el-col-12">
							<el-card>
								<template #header>
									<div class="card-header">
										<span>CPU</span>
									</div>
								</template>
								<div class="el-table el-table--enable-row-hover el-table--medium">
									<table cellspacing="0" style="width: 100%">
										<thead>
											<tr>
												<th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">值</div></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{ cpu.cpuCore }}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{cpu.cpuUserRate}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{cpu.cpuSysRate}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{cpu.cpuFreeRate}}</div></td>
											</tr>
										</tbody>
									</table>
								</div>
							</el-card>
						</div>
						<div class="card-box el-col el-col-12">
							<el-card>
								<template #header>
									<div class="card-header">
										<span>内存</span>
									</div>
								</template>
								<div class="el-table el-table--enable-row-hover el-table--medium">
									<table cellspacing="0" style="width: 100%">
										<thead>
											<tr>
												<th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.totalMemory}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.totalMemoryJvm}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.usedMemory}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.usedMemoryJvm}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.freeMemory}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.freeMemoryJvm}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.totalMemoryRate}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{memory.usedMemoryJvmRate}}</div></td>
											</tr>
										</tbody>
									</table>
								</div>
							</el-card>
						</div>
						<div class="card-box el-col el-col-24">
							<el-card>
								<template #header>
									<div class="card-header">
										<span>服务器信息</span>
									</div>
								</template>
								<div class="el-table el-table--enable-row-hover el-table--medium">
									<table cellspacing="0" style="width: 100%">
										<tbody>
											<tr>
												<!-- <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{server.name}}</div></td> -->
												<td colspan="1" class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
												<td colspan="3" class="el-table__cell is-leaf"><div class="cell">{{server.os}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{server.ip}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{server.architecture}}</div></td>
											</tr>
										</tbody>
									</table>
								</div>
							</el-card>
						</div>
						<div class="card-box el-col el-col-24">
							<el-card>
								<template #header>
									<div class="card-header">
										<span>Java虚拟机信息</span>
									</div>
								</template>
								<div class="el-table el-table--enable-row-hover el-table--medium">
									<table cellspacing="0" style="width: 100%; table-layout: fixed">
										<tbody>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{jvm.javaName}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{jvm.JavaVersion}}</div></td>
											</tr>
											<tr>
												<td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{jvm.JavaVersion}}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{jvm.days}}</div></td>
											</tr>
											<tr>
												<td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
												<td colspan="3" class="el-table__cell is-leaf"><div class="cell">{{jvm.libraryPath}}</div></td>
											</tr>
											<tr>
												<td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
												<td colspan="3" class="el-table__cell is-leaf"><div class="cell">{{jvm.proPath}}</div></td>
											</tr>
											<!-- <tr>
												<td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
												<td colspan="3" class="el-table__cell is-leaf"><div class="cell"></div></td>
											</tr> -->
										</tbody>
									</table>
								</div>
							</el-card>
						</div>
						<div class="card-box el-col el-col-24">
							<el-card>
								<template #header>
									<div class="card-header">
										<span>磁盘状态</span>
									</div>
								</template>
								<div class="el-table el-table--enable-row-hover el-table--medium">
									<table cellspacing="0" style="width: 100%">
										<thead>
											<tr>
												<th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
												<!-- <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th> -->
												<th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
												<th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(item, index) in disk" :key="index">
												<td class="el-table__cell is-leaf"><div class="cell">{{ item.path }}</div></td>
												<!-- <td class="el-table__cell is-leaf"><div class="cell"></div></td>
												<td class="el-table__cell is-leaf"><div class="cell"></div></td> -->
												<td class="el-table__cell is-leaf"><div class="cell">{{ item.total }}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{ item.freeSpace }}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{ item.usedSpace }}</div></td>
												<td class="el-table__cell is-leaf"><div class="cell">{{ item.usedRate }}</div></td>
											</tr>
											
										</tbody>
									</table>
								</div>
							</el-card>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script lang="ts" setup name="serviceslist">
import { pageList } from '/@/api/admin/services';

const cpu:any = ref({})
const memory:any = ref({})
const server:any = ref({})
const jvm:any = ref({})
const disk:any = ref([])
onMounted(() => {
	pageList().then(res => {
    cpu.value = res.data.cpu
    memory.value = res.data.memory
		server.value = res.data.server
		disk.value = res.data.disk || []
		jvm.value = res.data.jvm
  });
});
</script>

<style lang="scss" scoped>
.el-card {
	padding-bottom: 50px;
}
.el-card.is-always-shadow {
	border: 0;
	box-shadow: none;
}
.card-box {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 10px;
}
.el-table--medium .el-table__cell {
	padding: 10px 0;
}
th.el-table__cell,
.el-dialog__wrapper th.el-table__cell {
	background-color: #f5f7fa;
	color: #909399;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
	border-bottom: 1px solid #dfe6ec;
}
</style>
